// 柱状图模块
(function() {
  // 实例化对象
  var myChart = echarts.init(document.querySelector(".bar .chart"));
  // 指定配置和数据
  var option = {
    color: ["#ffa0a0", "rgba(47,130,255,0.56)"],
    tooltip: {
      trigger: 'axis'
    },
    legend: {
      data: ['降雨量', '蒸发量'],
      textStyle: {
        color: "rgba(0,0,0,0.6)",
        fontSize: 12,
        left: "5%"
      }
    },
    toolbox: {
      show: true,
      feature: {
        dataView: { show: true, readOnly: false },
        magicType: {show: true, type: ['line', 'bar']},
        restore: { show: true },
        saveAsImage: { show: true }
      }
    },
    grid: {
      left: "0%",
      top: "50px",
      right: "0%",
      bottom: "0%",
      containLabel: true
    },
    calculable: true,
    xAxis: [
      {
        type: 'category',
        // prettier-ignore
        data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
        axisTick: {
          alignWithLabel: true
        },
        axisLabel: {
          textStyle: {
            color: "rgb(0,0,0)",
            fontSize: "12"
          }
        },
        axisLine: {
          show: false
        }
      }
    ],
    yAxis: [
      {
        type: 'value',
        axisLabel: {
          textStyle: {
            color: "rgb(0,0,0)",
            fontSize: "12"
          }
        },
        axisLine: {
          lineStyle: {
            color: "rgba(0,0,0,0.3)"
            // width: 1,`
            // type: "solid"
          }
        },
        splitLine: {
          lineStyle: {
            color: "rgba(0,0,0,0.3)"
          }
        }
      }
    ],
    series: [
      {
        name: '降雨量',
        type: 'bar',
        data: [30, 49, 55, 62, 69, 77, 135, 162, 62, 50, 44, 33],
        markPoint: {
          data: [
            {name: 'Max', value: 162, xAxis: 7, yAxis: 163},
            {name: 'Min', value: 30, xAxis: 0, yAxis: 31}
          ]
        },
        markLine: {
          data: [{type: 'average', name: 'Avg'}]
        }
      },
      {
        name: '蒸发量',
        type: 'bar',
        data: [28, 39, 50, 64, 60, 77, 105, 122, 48, 38, 26, 23],
        markPoint: {
          data: [
            {name: 'Max', value: 122, xAxis: 7, yAxis: 123},
            {name: 'Min', value: 23, xAxis: 11, yAxis: 24}
          ]
        },
        markLine: {
          data: [{type: 'average', name: 'Avg'}]
        }
      }

    ]
  };
  // 把配置给实例对象
  myChart.setOption(option);
  window.addEventListener("resize", function () {
    myChart.resize();
  });
})();

// 折线图定制
(function() {
  // 基于准备好的dom，初始化echarts实例
  var myChart = echarts.init(document.querySelector(".line .chart"));

  var option = {
    // backgroundColor:'#062D87',
    tooltip : {
      trigger: 'axis'
    },
    legend: {
      data:['环境','水断面','水表面'],
      top: "0%",
      textStyle:{
        color: "rgba(0,0,0,0.6)"
      }
    },
    grid: {
      left: "10",
      top: "30",
      right: "10",
      bottom: "10",
      containLabel: true
    },
    toolbox: {
      show : true,
      feature : {
        mark : {show: true},
        dataView : {show: true, readOnly: false},
        magicType : {show: true, type: ['line', 'bar']},
        restore : {show: true},
        saveAsImage : {show: true}
      }
    },
    calculable : true,
    xAxis : [
      {
        type : 'category',
        name: "小时",
        boundaryGap : false,
        data : ['0','4','8','12','16','20','24'],
        axisTick: {
          show: true //隐藏X轴刻度
        },
        axisLabel: {
          show: true,
          textStyle: {
            color: "#000000" //X轴文字颜色
          }
        },
      }
    ],
    yAxis : [
      {
        type : 'value',
        name:"℃'",
        nameTextStyle: {
          color: "#000000"
        },
        axisLabel : {
          formatter: '{value}℃'
        },
        axisLabel: {
          show: true,
          textStyle: {
            color: "#000000"
          }
        },
        splitLine: {
          lineStyle: {
            type: 'dashed',
            color: 'rgba(255,255,255,0)'
          }
        },
      }
    ],
    series : [
      {
        name:'环境',
        type:'line',
        min:10,
        max:40,
        data:[13, 15, 18, 19, 17, 15, 12],
        // markPoint : {
        //   data : [
        //     {name : '日最高', value : 39, xAxis: 2, yAxis: 39}
        //   ]
        // },
        lineStyle: {
          normal: {
            width: 5,
            color: {
              type: 'linear',

              colorStops: [{
                offset: 0,
                color: '#3bad09' // 0% 处的颜色
              },
                {
                  offset: 0.4,
                  color: '#3bad09' // 100% 处的颜色
                }, {
                  offset: 1,
                  color: '#3bad09' // 100% 处的颜色
                }
              ],
              globalCoord: false // 缺省为 false
            },
            shadowColor: '#3bad09',
            shadowBlur: 10,
            shadowOffsetY: 7
          }
        },
        itemStyle: {
          normal: {
            color: '#AAF487',
            borderWidth: 10,
            /*shadowColor: 'rgba(72,216,191, 0.3)',
             shadowBlur: 100,*/
            borderColor: "#AAF487"
          }
        },
        smooth: true,
        markLine : {
          data : [
            {type : 'average', name: '平均值'}
          ]
        }
      },
      {
        name:'水断面',
        type:'line',
        min:10,
        max:40,
        data:[25, 22, 26, 28, 27, 26, 23],
        // markPoint : {
        //   data : [
        //     {name : '日最低', value : 22, xAxis: 1, yAxis: 22}
        //   ]
        // },
        lineStyle: {
          normal: {
            width: 5,
            color: {
              type: 'linear',

              colorStops: [{
                offset: 0,
                color: '#f1a17c' // 0% 处的颜色
              },
                {
                  offset: 0.4,
                  color: '#f1a17c' // 100% 处的颜色
                }, {
                  offset: 1,
                  color: '#f1a17c' // 100% 处的颜色
                }
              ],
              globalCoord: false // 缺省为 false
            },
            shadowColor: '#f1a17c',
            shadowBlur: 10,
            shadowOffsetY: 7
          }
        },
        itemStyle: {
          normal: {
            color: '#f1a17c',
            borderWidth: 10,
            /*shadowColor: 'rgba(72,216,191, 0.3)',
             shadowBlur: 100,*/
            borderColor: "#f1a17c"
          }
        },
        smooth: true,
        markLine : {
          data : [
            {type : 'average', name : '平均值'}
          ]
        }
      },
      {
        name:'水表面',
        type:'line',
        min:10,
        max:40,
        data:[8, 10, 12, 14, 10, 9, 7],
        // markPoint : {
        //   data : [
        //     {name : '日最低', value : 22, xAxis: 1, yAxis: 22}
        //   ]
        // },
        lineStyle: {
          normal: {
            width: 5,
            color: {
              type: 'linear',

              colorStops: [{
                offset: 0,
                color: '#9bd6ef' // 0% 处的颜色
              },
                {
                  offset: 0.4,
                  color: '#9bd6ef' // 100% 处的颜色
                }, {
                  offset: 1,
                  color: '#9bd6ef' // 100% 处的颜色
                }
              ],
              globalCoord: false // 缺省为 false
            },
            shadowColor: '#9bd6ef',
            shadowBlur: 10,
            shadowOffsetY: 7
          }
        },
        itemStyle: {
          normal: {
            color: '#9bd6ef',
            borderWidth: 10,
            /*shadowColor: 'rgba(72,216,191, 0.3)',
             shadowBlur: 100,*/
            borderColor: "#9bd6ef"
          }
        },
        smooth: true,
        markLine : {
          data : [
            {type : 'average', name : '平均值'}
          ]
        }
      }
    ]
  };


  // 3. 把配置和数据给实例对象
  myChart.setOption(option);

  // 重新把配置好的新数据给实例对象
  myChart.setOption(option);
  window.addEventListener("resize", function() {
    myChart.resize();
  });
})();

// 圈状图定制
(function() {
  // 基于准备好的dom，初始化echarts实例
  var myChart = echarts.init(document.querySelector(".pie .chart"));
  //扇形图配置项
  const pieoption = {
    // backgroundColor: '#f1dbba',
    angleAxis: {
      type: "value",
      min: 0,
      max: 150,
      axisLine: {
        show: false
      },
      axisTick: {
        show: false
      },
      splitLine: {
        show: false
      },
      axisLabel: {
        show: false
      }
    },
    radiusAxis: {
      type: "category",
      data: ["PM2.5", "PM10", "CO", "NO2", "O3", "SO2"],
      z: 200,
      axisLine: {
        show: false
      },
      axisTick: {
        show: false
      },
      axisLabel: {
        show: true,
        margin: 6,
        fontSize: 10,
        textStyle: {
          color: "#000000"
        },
        interval: 0
      }
    },
    polar: {
      center: ["50%", "50%"]
    },
    tooltip: {
      show: true
    },
    series: [
      {
        type: "bar",
        barWidth: "45%",
        data: [20],
        coordinateSystem: "polar",
        name: "PM2.5",
        stack: "a",
        roundCap: true,
        itemStyle: {
          color: "#BFA27C",
          barBorderRadius: 5
        },
        showBackground: true,
        backgroundStyle: {
          color: "#27333F",
          barBorderRadius: 100
        }
      },
      {
        type: "bar",
        data: [0, 25, 0, 0],
        coordinateSystem: "polar",
        name: "PM10",
        stack: "a",
        roundCap: true,
        itemStyle: {
          color: "#328CD9"
        },
        showBackground: true,
        backgroundStyle: {
          color: "#27333F"
        }
      },
      {
        type: "bar",
        data: [0, 0, 40, 0],
        coordinateSystem: "polar",
        name: "CO",
        stack: "a",
        roundCap: true,
        itemStyle: {
          color: "#1FB4A7",
          barBorderRadius: 5
        },
        showBackground: true,
        backgroundStyle: {
          color: "#27333F"
        }
      },
      {
        type: "bar",
        data: [0, 0, 0, 60],
        coordinateSystem: "polar",
        name: "NO2",
        stack: "a",
        roundCap: true,
        itemStyle: {
          color: "#424CB9",
          barBorderRadius: 5
        },
        showBackground: true,
        backgroundStyle: {
          color: "#27333F"
        }
      },
      {
        type: "bar",
        data: [0, 0, 0, 0, 80],
        coordinateSystem: "polar",
        name: "O3",
        stack: "a",
        roundCap: true,
        itemStyle: {
          color: "#255CB9",
          barBorderRadius: 5
        },
        showBackground: true,
        backgroundStyle: {
          color: "#27333F"
        }
      },
      {
        type: "bar",
        data: [0, 0, 0, 0, 0, 80],
        coordinateSystem: "polar",
        name: "SO2",
        stack: "a",
        roundCap: true,
        itemStyle: {
          color: "#213AF9",
          barBorderRadius: 5
        },
        showBackground: true,
        backgroundStyle: {
          color: "#27333F"
        }
      }
    ],
    legend: {
      bottom: 0,
      icon: "circle",
      itemHeight: 10,
      show: true,
      data: ["PM2.5", "PM10", "CO", "NO2", "O3", "SO2"],
      selectedMode: false,
      textStyle: {
        color: "#000000",
        fontSize: 10
      }
    }
  }
  var myColor = [
    "#BFA27C",
    "#328CD9",
    "#1FB4A7",
    "#424CB9",
    "#255CB9",
  ];
  //柱状图配置项
  const baroption = {
    // color: ["#ff9f7f"],
    xAxis: {
      type: 'category',
      data: ["PM2.5", "PM10", "CO", "NO2", "O3", "SO2"],
    },
    yAxis: {
      type: 'value'
    },
    grid: {
      left: "10",
      top: "30",
      right: "10",
      bottom: "10",
      containLabel: true
    },
    calculable: true,
    toolbox: {
      show: true,
      feature: {
        dataView: { show: true, readOnly: false },
        magicType: {show: true, type: ['line', 'bar']},
        restore: { show: true },
        saveAsImage: { show: true }
      }
    },
    tooltip : {
      trigger: 'axis',
      // formatter: "{a} <br/>{b} : {c} ({d}%)"
    },
    series: [
      {
        name: '含量',
        data: [20, 25, 40, 60, 80, 80],
        itemStyle: {
          normal: {
            color: function(params) {
              var num = myColor.length;
              return myColor[params.dataIndex % num]
            },
          }
        },
        type: 'bar',
        showBackground: true,
        backgroundStyle: {
          color: 'rgba(180, 180, 180, 0.2)'
        }
      }
    ]
  }
  let currentOption = pieoption;
  // 3. 配置项和数据给我们的实例化对象
  myChart.setOption(pieoption);
  // 4. 计时转化视图功能
  setInterval(function () {
    currentOption = currentOption === pieoption ? baroption : pieoption;
    myChart.setOption(currentOption, true);
  }, 20000);
  // 5. 当我们浏览器缩放的时候，图表也等比例缩放
  window.addEventListener("resize", function() {
    myChart.resize();
  });
})();

//其他数据
(function() {
  //基于准备好的dom，初始化echarts实例
  var myChart = echarts.init(document.querySelector(".bar1 .chart"));

  var data = [70, 34, 60, 78];
  var titlename = ["空气湿度%", "含氧量%", "水位m", "溶解度mg/L"];
  var valdata = [30, 350, 45, 503];
  var myColor = ["#1089E7", "#F57474", "#56D0E3", "#F8B448"];
  var option = {
    //图标位置
    grid: {
      top: "10%",
      left: "22%",
      bottom: "10%"
    },
    xAxis: {
      show: false
    },
    yAxis: [
      {
        show: true,
        data: titlename,
        inverse: true,
        axisLine: {
          show: false
        },
        splitLine: {
          show: false
        },
        axisTick: {
          show: false
        },
        axisLabel: {
          color: "#000000",

          rich: {
            lg: {
              backgroundColor: "#339911",
              color: "#fff",
              borderRadius: 15,
              // padding: 5,
              align: "center",
              width: 15,
              height: 15
            }
          }
        }
      },
      {
        show: true,
        inverse: true,
        data: valdata,
        axisLabel: {
          textStyle: {
            fontSize: 12,
            color: "#000000"
          }
        }
      }
    ],
    series: [
      {
        name: "条",
        type: "bar",
        yAxisIndex: 0,
        data: data,
        barCategoryGap: 50,
        barWidth: 10,
        itemStyle: {
          normal: {
            barBorderRadius: 20,
            color: function(params) {
              var num = myColor.length;
              return myColor[params.dataIndex % num];
            }
          }
        },
        label: {
          normal: {
            show: true,
            position: "inside",
            formatter: "{c}%"
          }
        }
      },
      {
        name: "框",
        type: "bar",
        yAxisIndex: 1,
        barCategoryGap: 50,
        data: [100, 100, 100, 100],
        barWidth: 15,
        itemStyle: {
          normal: {
            color: "none",
            borderColor: "#00c1de",
            borderWidth: 3,
            barBorderRadius: 15
          }
        }
      }
    ]
  };

  // 使用刚指定的配置项和数据显示图表。
  myChart.setOption(option);
  window.addEventListener("resize", function() {
    myChart.resize();
  });
})();

// 折线图
(function() {
  // 基于准备好的dom，初始化echarts实例
  var myChart = echarts.init(document.querySelector(".line1 .chart"));

  var option = {
    tooltip: {
      trigger: "axis",
      axisPointer: {
        lineStyle: {
          color: "#dddc6b"
        }
      }
    },
    legend: {
      data: ['室内dB', '室外dB'],
      top: "0%",
      textStyle: {
        color: "rgb(0,0,0)",
        fontSize: "12"
      }
    },
    grid: {
      left: "10",
      top: "30",
      right: "10",
      bottom: "10",
      containLabel: true
    },

    toolbox: {
      show : true,
      feature : {
        mark : {show: true},
        dataView : {show: true, readOnly: false},
        magicType : {show: true, type: ['line', 'bar']},
        restore : {show: true},
        saveAsImage : {show: true}
      }
    },
    xAxis: [
      {
        type: "category",
        boundaryGap: false,
        axisLabel: {
          textStyle: {
            color: "rgb(0,0,0)",
            fontSize: 12
          }
        },
        axisLine: {
          lineStyle: {
            color: "rgba(0,0,0,0.2)"
          }
        },
        data: [
          "01",
          "02",
          "03",
          "04",
          "05",
          "06",
          "07",
          "08",
          "09",
          "10",
          "11",
          "12",
          "13",
          "14",
          "15",
          "16",
          "17",
          "18",
          "19",
          "20",
          "21",
          "22",
          "23",
          "24",
        ]
      },
      {
        axisPointer: { show: false },
        axisLine: { show: false },
        position: "bottom",
        offset: 20
      }
    ],

    yAxis: [
      {
        type: "value",
        axisTick: { show: false },
        axisLine: {
          lineStyle: {
            color: "rgb(0,0,0)"
          }
        },
        axisLabel: {
          textStyle: {
            color: "rgb(0,0,0)",
            fontSize: 12
          }
        },
        splitLine: {
          lineStyle: {
            color: "rgb(212,188,188)"
          }
        }
      }
    ],
    series: [
      {
        name: "室内dB",
        type: "line",
        smooth: true,
        symbol: "circle",
        symbolSize: 5,
        showSymbol: false,
        lineStyle: {
          normal: {
            color: "#0184d5",
            width: 2
          }
        },
        areaStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(
              0,
              0,
              0,
              1,
              [
                {
                  offset: 0,
                  color: "rgba(1, 132, 213, 0.4)"
                },
                {
                  offset: 0.8,
                  color: "rgba(1, 132, 213, 0.1)"
                }
              ],
              false
            ),
            shadowColor: "rgba(0, 0, 0, 0.1)"
          }
        },
        itemStyle: {
          normal: {
            color: "#0184d5",
            borderColor: "rgba(221, 220, 107, .1)",
            borderWidth: 12
          }
        },
        data: [
          30,
          40,
          30,
          40,
          30,
          40,
          30,
          60,
          20,
          40,
          20,
          40,
          30,
          40,
          30,
          40,
          30,
          40,
          30,
          60,
          20,
          40,
          20,
          40
        ]
      },
      {
        name: "室外dB",
        type: "line",
        smooth: true,
        symbol: "circle",
        symbolSize: 5,
        showSymbol: false,
        lineStyle: {
          normal: {
            color: "#00d887",
            width: 2
          }
        },
        areaStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(
              0,
              0,
              0,
              1,
              [
                {
                  offset: 0,
                  color: "rgba(0, 216, 135, 0.4)"
                },
                {
                  offset: 0.8,
                  color: "rgba(0, 216, 135, 0.1)"
                }
              ],
              false
            ),
            shadowColor: "rgba(0, 0, 0, 0.1)"
          }
        },
        itemStyle: {
          normal: {
            color: "#00d887",
            borderColor: "rgba(221, 220, 107, .1)",
            borderWidth: 12
          }
        },
        data: [
          50,
          30,
          50,
          60,
          10,
          50,
          30,
          50,
          60,
          40,
          60,
          40,
          80,
          30,
          50,
          60,
          10,
          50,
          30,
          70,
          20,
          50,
          10,
          40
        ]
      }
    ]
  };

  // 使用刚指定的配置项和数据显示图表。
  myChart.setOption(option);
  window.addEventListener("resize", function() {
    myChart.resize();
  });
})();

// 负离子浓度分布统计模块
(function() {
  // 1. 实例化对象

  var myChart = echarts.init(document.querySelector(".pie1  .chart"));
  // 2. 指定配置项和数据
  const pieoption = {
    legend: {
      top: "90%",
      itemWidth: 10,
      itemHeight: 10,
      textStyle: {
        color: "rgb(0,0,0)",
        fontSize: "12"
      }
    },
    tooltip: {
      trigger: "item",
      formatter: "{a} <br/>{b} : {c} ({d}%)"
    },
    // 注意颜色写的位置
    color: [
      '#006cff',
      '#60cda0',
      '#ed8884',
      '#ff9f7f',
      '#0096ff',
      '#32c5e9',
      '#1d9dff'
    ],
    series: [
      {
        name: "负离子湿度",
        type: "pie",
        // 如果radius是百分比则必须加引号
        radius: ["10%", "70%"],
        center: ["50%", "42%"],
        roseType: "radius",
        data: [
          { value: 20, name: "周一" },
          { value: 26, name: "周二" },
          { value: 24, name: "周三" },
          { value: 25, name: "周四" },
          { value: 20, name: "周五" },
          { value: 25, name: "周六" },
          { value: 30, name: "周日" },
        ],
        // 修饰饼形图文字相关的样式 label对象
        label: {
          fontSize: 10
        },
        // 修饰引导线样式
        labelLine: {
          // 连接到图形的线长度
          length: 10,
          // 连接到文字的线长度
          length2: 10
        }
      }
    ]
  };

  var myColor = [
    '#006cff',
    '#60cda0',
    '#ed8884',
    '#ff9f7f',
    '#0096ff',
    '#32c5e9',
    '#1d9dff'
  ];

  const baroption = {
    // color: ["#ff9f7f"],
    xAxis: {
      type: 'category',
      data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
    },
    yAxis: {
      type: 'value'
    },
    grid: {
      left: "10",
      top: "30",
      right: "10",
      bottom: "10",
      containLabel: true
    },
    calculable: true,
    toolbox: {
      show: true,
      feature: {
        dataView: { show: true, readOnly: false },
        magicType: {show: true, type: ['line', 'bar']},
        restore: { show: true },
        saveAsImage: { show: true }
      }
    },
    tooltip : {
      trigger: 'axis',
      // formatter: "{a} <br/>{b} : {c} ({d}%)"
    },
    series: [
      {
        name: '负离子湿度',
        data: [120, 200, 150, 80, 70, 110, 130],
        itemStyle: {
          normal: {
            color: function(params) {
              var num = myColor.length;
              return myColor[params.dataIndex % num]
            },
          }
        },
        type: 'bar',
        showBackground: true,
        backgroundStyle: {
          color: 'rgba(180, 180, 180, 0.2)'
        }
      }
    ]
  }

  let currentOption = pieoption;
  // 3. 配置项和数据给我们的实例化对象
  myChart.setOption(pieoption);
  // 4. 计时转化视图功能
  setInterval(function () {
    currentOption = currentOption === pieoption ? baroption : pieoption;
    myChart.setOption(currentOption, true);
  }, 20000);

  // 5. 当我们浏览器缩放的时候，图表也等比例缩放
  window.addEventListener("resize", function() {
    // 让我们的图表调用 resize这个方法
    myChart.resize();
  });
})();
